import React from 'react'
// ===================================================================== public module
import { RightCircleOutlined, LeftCircleOutlined } from '@ant-design/icons'
// ===================================================================== page module
import Tabs from './cpt/tabs'
import ButtonsGroup from './cpt/button-group'
import Search from './cpt/search'
import Table from './cpt/table'
import Person from './cpt/person-detail'
import Result from './cpt/result'
// ===================================================================== global declare
const { $Lazy, $fn } = window
// ===================================================================== Lazy
const Page 					= $Lazy.load(()=>import('#tp/page/page-container'))
// ===================================================================== tabs
// 新增44032页面 20211102 耿琰	// 新增44033模型 2022/8/9 --马婷
const BingLiMode = [44013,44022,44021,44008, 44029, 44030, 44032, 44033]
const NoWayMode = [44011]
const BingLiTabs = [
	{ title:'结果录入', 	status:45001 },
	{ title:'已提交', 	status:45003 },
	{ title:'已审核', 	status:45004 },
	{ hide:true },
	{ title:'已迟发', 	status:45006 },
	{ title:'已退单', 	status:45007 },
	{ title:'已终止', 	status:45008 },
]
const OtherTabs = [
	{ title:'结果录入', 	status:45001 },
	{ title:'已提交', 	status:45002 },
	{ title:'已校验', 	status:45003 },
	{ title:'已审核', 	status:45004 },
	{ title:'已迟发', 	status:45006 },
	{ title:'已退单', 	status:45007 },
	{ title:'已终止', 	status:45008 }
]
// =====================================================================
class Index extends React.Component{
	state = {
		data:[],
		selectedKeys:[],
		selectedRows:[],
		tabs:[],
		// 搜索表单列表
		forms : [],
		// 标本类型
		// sampleTypeData:[]
	}
	model = {}
	query = {}
	// 完整项目
	cross_page_submit = 0
	
	BingLiMode = BingLiMode
	
	result_model = +$fn.getCenterQuery()['result_model']
	// 是否是外包
	isEntrust = window.location.href.indexOf('/entrust-testing-center/') !== -1

	getIsWay = () => {
		if (+$fn.getUser().check_view_mode) {
			if (NoWayMode.includes(this.result_model)) {
				return 0
			} else {
				return 1
			}
		} else {
			return 0
		}
	}
	
	way = this.getIsWay()
	
	componentDidMount(){
		const { result_model, project_id } =  $fn.getCenterQuery()
		// 存储 tabs 索引
		this.saveName = result_model + '-' + project_id
		// 模型
		this.result_model = +result_model
		// tabs
		this.oldTabs = BingLiMode.includes(this.result_model) ? BingLiTabs : OtherTabs
		this.tabs = this.oldTabs
		// 菜单权限配置
		/*
		const permission = $fn.local('menu_permisson')
		if($fn.hasObject(permission)){
			const per = permission[result_model] || []
			if($fn.isArray(per)){
				this.tabs.forEach(m=>{
					m.hide = true
					per.forEach(v=>{
						if(m.status === +v){
							m.hide = false
						}
					})
				})
			}
		}
		const stack = this.tabs.filter( v => !v.hide && v.status )
		const index = $fn.hasArray(stack) ? ($fn.local([this.saveName]) || 0) : -1
		const status = index !== -1 ? this.tabs[index]['status'] : ''
		this.index = index
		*/
	   // 无权限
		this.index = $fn.local([this.saveName]) || 0
		const status = this.tabs[this.index]['status']
		//
		const type = this.isEntrust ? 1 : 0
		// 搜索参数
		this.query = { project_id, result_model:this.result_model, id:this.result_model, result_id: this.result_model, status, type,check_view_mode:this.way }
		// 刷新 info
		this.refreshInfo = () =>{
			const { info } = this.state || {}
			const { uuid, status } = info || {}
			if(uuid){
				window.$http.submit(this,'ts-report-card/info',{ param:{ uuid, status, result_model }, loading:false, isPull:true }).then(info=>{
					this.setState({ info })
				})
			}else{
				this.setState({ info:{} })
			}
		}
		// 返回刷新
		$fn.fresh.on( param =>{
			this.refreshInfo()
			this.searchRef.onRefresh()
			if(param === 'clear-keys-info'){ 
				this.tableRef.clear()
			}
		}, 'onModelRefresh')
		
		window.addEventListener('keyup', this.onResultFocusNext)
	}
	
	componentWillUnmount(){
		$fn.fresh.remove('onModelRefresh')
		// $fn.remove(this.saveName)
		window.removeEventListener('keyup', this.onResultFocusNext)
		this.setState = ()=> false
	}

	// 获取当前行的index [2021-8-13 9:42:26 ?F10: AM?] --伍智睿
	getRowIndex = el => {
		if (el.attributes.index) {
			return parseInt(el.attributes.index.value)
		} else {
			return this.getRowIndex(el.parentNode)
		}
	}
	
	// Ctrl + mouse 多选
	onResultFocusNext = e => {
		e.preventDefault()
		if( e.keyCode === 38 || e.keyCode === 40){
			const $box = document.querySelector('.project-list')
			if($box){
				const $focus = $box.querySelector('.ant-input-affix-wrapper-focused')
				if($focus && $focus.className.indexOf('result')){
					let $result = $box.querySelectorAll('.result')
						$result = Array.prototype.slice.call($result)
						
					for(let i=0;i<$result.length;i++){
						const v = $result[i]
						if(v.className.indexOf('ant-input-affix-wrapper-focused') !== -1){
							const $input = e.keyCode === 38 ? $result[i-1] : $result[i+1]
							if($input){
								// 移动到当前下标 如果 value 为 0、0.0 清空 2021-7-27 9:18:38 ?F10: AM? --伍智睿
								const { data } = this.tableRef.state
								const $rowIndex = this.getRowIndex($input.parentNode)
								if (/^0+(\.?0*)?$/.test(data[$rowIndex].result)) {
									data[$rowIndex].result = ''
									this.tableRef.setState({})
								}
								$input.querySelector('input').focus()
								break
							}
						}
					}
				}
			}
		}
	}
	
	render(){
		const MyTable = <Table parent={this.way} top={this} {...this.props} ref={ref=>this.tableRef=ref} tableRef2={()=>this.tableRef2} personRef={()=>this.personRef} resultRef={()=>this.resultRef} searchRef={()=>this.searchRef} btnGroupRef={() =>this.btnGroupRef}/>
		const MyTable2 = <Table way={this.way} child top={this} {...this.props} ref={ref=>this.tableRef2=ref} tableRef1={()=>this.tableRef} personRef={()=>this.personRef} resultRef={()=>this.resultRef} searchRef={()=>this.searchRef} btnGroupRef={() =>this.btnGroupRef}/>
		
		const MyPerson = <Person ref={ref=>this.personRef=ref} mode={this.result_model} />
		const MyResult = <Result top={this} searchRef={()=>this.searchRef} ref={ref=>this.resultRef=ref} tableRef={()=>this.tableRef} {...this.prop}/>
		const MySpace = <div className='fxmc h' style={{width:10}}></div>
		const MyArrowSpace =( { onClick, index } )=>(
			<div className='fxmc' style={{padding:'0 1px'}}>
				{index === 1?
				<div onClick={onClick} ref={ref=>this.arrowRef1=ref}>
					<RightCircleOutlined style={{color:$fn.c0, fontSize:12, cursor:'pointer'}} />
				</div>:index === 2?
				<div onClick={onClick} ref={ref=>this.arrowRef2=ref}>
					<LeftCircleOutlined style={{color:$fn.c0, fontSize:12, cursor:'pointer'}} />
				</div>:
				<div onClick={onClick} ref={ref=>this.arrowRef3=ref}>
					<RightCircleOutlined style={{color:$fn.c0, fontSize:12, cursor:'pointer'}} />
				</div>
				}
			</div>
		)
		return (
			<>
				<Page nobc className='small-bm'>
					{/* Tabs */}
					<Tabs top={this} btnGroupRef={()=>this.btnGroupRef} searchRef={()=>this.searchRef} tableRef={()=>this.tableRef}/>
					{/* 操作按钮 */}
					<ButtonsGroup top={this} ref={ref=>this.btnGroupRef=ref} searchRef={()=>this.searchRef} tableRef={()=>this.tableRef} personRef={()=>this.personRef} {...this.props} />
					{/* 搜索 */}
					<Search top={this} ref={ref=>this.searchRef=ref} tableRef={()=>this.tableRef} tableRef2={()=>this.tableRef2} resultRef={()=>this.resultRef}/>
					{/* button */}
					<div className='ex mt5 fx'>
						{
							[44016, 44014, 44017, 44019, 44024, 44025, 44027, 44028, 44015, 44018, 44031].includes(this.result_model) ? (
								<>
									{/* 表格 */}		{/* 修改右侧表格宽度 2022-3-30 --马婷  */} 
									<div className={ Boolean(this.way) ? 'h linear' : 'h linear ex' } style={ Boolean(this.way) ? {width:350} : {} } ref={ref=>this.tableBox=ref}>{ MyTable }</div>
									{/* 空隙 */}
									{/* 修复收缩按钮报错  20211009 耿琰 */}  {/* 分栏模式按钮收缩  2022-3-31 马婷 */}
									<div className='fv xm xc h'>
										<MyArrowSpace index={1} onClick={()=> {
											this.isFull = !this.isFull
											if(this.isFull){
												// this.tableBox.style.width = 'calc(100% - 15px)'
												this.arrowRef1.className = 'linear arrow-left'
												this.personBoxWidth = this.personBoxWidth ? this.personBoxWidth : this.personBox.clientWidth
												this.resultBoxWidth = this.resultBoxWidth? this.resultBoxWidth :this.resultBox.clientWidth
												this.personBox.style.width = 0
												this.resultBox.style.width = 0
												this.spaceBox2.style.width = 0
												if(this.tableBox2){
													this.tableBox2.style.width = 0
													this.tableBox2.className = 'h linear mr5 oh'
												}
											}else{
												// this.tableBox.style.width = 'auto'
												this.arrowRef1.className = 'linear'
												this.personBox.style.width = this.personBoxWidth + 'px'
												this.resultBox.style.width = this.resultBoxWidth + 'px'
												this.spaceBox2.style.width = '10px'
												if(this.tableBox2){
													this.tableBox2.className = 'h linear mr5 oh ex'
												}
											}
										} } />
										{this.way?<MyArrowSpace index={2} onClick={()=> {
											this.LeftTable = !this.LeftTable
											if(this.LeftTable){
												this.tableBox.style.width = 0
												this.tableBox.className = 'oh'
												this.arrowRef2.className = 'linear arrow-left'
												
											}else{
												this.tableBox.className = 'ex h linear'
												this.arrowRef2.className = 'linear'
											}
										} } /> : null}
									</div>
									
									{
										Boolean(this.way) && (
											<div className='h linear oh ex' ref={ref=>this.tableBox2=ref}>
												{MyTable2}
											</div>
										)
									}
									{this.way ? <MyArrowSpace index={3} onClick={()=> {
										this.isPerson = !this.isPerson
										if(this.isPerson){
											this.personBoxWidth = this.personBoxWidth?this.personBoxWidth:this.personBox.clientWidth
											this.resultBoxWidth = this.resultBoxWidth?this.resultBoxWidth:this.resultBox.clientWidth
											this.personBox.style.width = 0
											this.resultBox.style.width = 0
											this.spaceBox2.style.width = 0
											this.arrowRef3.className = 'linear arrow-left'
										}else{
											this.personBox.style.width = this.personBoxWidth + 'px'
											this.resultBox.style.width = this.resultBoxWidth + 'px'
											this.spaceBox2.style.width = '10px'
											this.arrowRef3.className = 'linear'
										}
									} } /> : null}
									{/* 人员信息 */}
									<div className='h linear oh' ref={ref=>this.personBox=ref}>{ MyPerson }</div>
									{/* 空隙 */}
									<div className='fxmc h' ref={ref=>this.spaceBox2=ref} style={{width:5}}></div>
									{/* 结果 */}
									<div className='h linear oh' ref={ref=>this.resultBox=ref}>{ MyResult }</div>
								</>
							) : (
								<>
									{/* 人员信息 */}
									{ MyPerson }
									{/* 空隙 */}
									{ MySpace }
									{/* 结果 */}
									{ MyResult }
									{/* 空隙 */}
									{ MySpace }
									{/* 表格 */}
									<div style={{width:[44011, 44012, 44020].includes(this.result_model) ? 580 : 280}}>{ MyTable }</div>
								</>
							)
						}
					</div>
				</Page>
			</>
		)
	}
}

export default Index